<template>
  <ScalablePage>
    <div class="big-screen aqgl flex-between" style="width: 480px; overflow: hidden">
      <!-- 2#回转式格栅除污机 -->
      <!-- 右部 -->
      <div class="rigtContainer">
        <div class="right-content">
          <div class="image-container">
            <img src="@/assets/dxq/hzs.png" alt="" class="hzs-img" />
            <p>2#回转式格栅除污机</p>
          </div>
          <img src="@/assets/dxq/zssj.png" alt="" class="zssj-img" />
          <div class="right-content-icon">
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">设备编码</span>
                </p>
                <p class="p2">000000000000073</p>
              </div>
            </div>
            <!-- 第二个 -->
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">型号规格</span>
                </p>
                <p class="p2">PX</p>
              </div>
            </div>
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">设备品牌</span>
                </p>
                <p class="p2">天津塘沽瓦斯特阀门有限公司</p>
              </div>
            </div>
            <!-- 第四个 -->
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">设备状态</span>
                </p>
                <p class="p2">111</p>
              </div>
            </div>
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">资产状态</span>
                </p>
                <p class="p2">在用</p>
              </div>
            </div>
            <!-- 第六个 -->
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">上次故障时间</span>
                </p>
                <p class="p2">1111</p>
              </div>
            </div>
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">维护倒计时</span>
                </p>
                <p class="p2">1111</p>
              </div>
            </div>
            <!-- 第八个 -->
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">运行时长</span>
                </p>
                <p class="p2">1111</p>
              </div>
            </div>
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">安装日期</span>
                </p>
                <p class="p2">1111</p>
              </div>
            </div>
            <!-- 第十个 -->
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">维护倒计时</span>
                </p>
                <p class="p2">1111</p>
              </div>
            </div>
            <div class="item">
              <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
              <div class="text">
                <p class="p1">
                  <span class="p1-sp1">运行状态</span>
                </p>
                <p class="p2">222</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>
<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue"; // 引入组件自适应
</script>
<style scoped lang="less">
// 样式引入
@import url("../../styles/aqgl.less");
// 右边
.rigtContainer {
  top: 0;
  right: 0;
  width: 695px;
  height: 1077px;
}
.right-content {
  //   position: absolute;
  top: 0;
  right: 0;
  padding-right: 50px;
  padding-top: 0px;
  display: flex;
  flex-direction: column;
}
.image-container {
  position: relative;
  width: 535.67px;
  height: 54px;
  img {
    width: 100%;
    height: 100%;
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
  }
  p {
    position: absolute;
    display: inline-block;
    top: 2px;
    left: 41px;
    font-family: OPPOSans, OPPOSans;
    font-weight: normal;
    font-size: 30px;
    color: #ffffff;
    line-height: 40px;
    text-align: left;
    font-style: normal;
  }
}
.zssj-img {
  margin-top: 3px;
  width: 205px;
  //   height: 28.82px;
  height: auto;
  max-height: 40px;
}
.right-content-icon {
  margin-top: 33px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 从行的开始位置对齐 */
  align-items: flex-start;
  // 选择奇数的.item元素
  .right-content-icon .item:nth-child(odd) {
    margin-left: 0px;
  }
  // 选择偶数的.item元素
  .right-content-icon .item:nth-child(even) {
    margin-left: 10px;
  }
  .item {
    display: flex;
    margin-bottom: 33px; /* 每个.item的底部外边距 */
    width: 50%; /* 每个.item占据50%的宽度，从而每行两个 */
    height: 64px;
    .text {
      display: flex;
      flex-direction: column;
      margin-left: 21px;
      .p1 {
        display: flex;
        .p1-sp1 {
          font-family: D-DIN, D-DIN;
          font-weight: bold;
          font-size: 19px;
          color: #ffffff;
          line-height: 29px;
          text-align: left;
          font-style: normal;
          margin-right: 1px;
        }
      }
      .p2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 17px;
        color: #ffffff;
        line-height: 29px;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
.right-content-icon img {
  width: 76px;
  height: 66px;
}
</style>
